<template>
  <div>
    <Headline
        :headline1="$t('m.ClientAdmin') "
        :headline2="'   /   '+$t('m.ClientInfo')"
    ></Headline>
    <a-card style="width: 100%">
      <div class="search-a ov_flex">
        <a-input-search
            style="width: 200px"
            :placeholder="$t('m.PleaseEnterCustomerKeywords')"
            size="default"
            @search="onSearch"
            v-model="forminitial.key"
        />

        <a-select
            style="width: 200px"
            class="select-a"
            v-model="forminitial.custType"
            @change="contSelectChange"
        >
          <a-select-option
              v-for="item in dictionariesA"
              :value="item.code"
              :key="item.code"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>

        <a-select
            style="width: 200px"
            class="select-a"
            v-model="forminitial.custLevel"
            @change="contSelectChangeB"
        >
          <a-select-option
              v-for="item in dictionariesB"
              :value="item.code"
              :key="item.code"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
        <div class="btn-dispo">
          <a-button type="primary" @click="parbrn">
            {{ $t("m.NewCustomer") }}
          </a-button>
        </div>
      </div>
      <div id="components-table-demo-size">
        <a-table
            :rowKey="(r, i) => i.toString()"
            :columns="columns"
            :data-source="datas"
            bordered
            :pagination="false"
        >
          <div slot="chxeds" slot-scope="chxeds, doc, i">
            <a-switch
                default-checked
                :checked="doc.status == 0 ? false : true"
                @change="chxedsd(chxeds, doc, i)"
            />
          </div>
          <div slot="tags" slot-scope="text, tags, i">
            <a-button
                class="btn"
                type="primary"
                icon="setting"
                @click="edit(text, tags, i)"
            >{{ $t("m.Configuration") }}
            </a-button
            >
            <a-button
                class="btn"
                type="primary"
                icon="edit"
                @click="changed(text, tags, i)"
            >{{ $t("m.Modification") }}
            </a-button
            >
            <a-button
                class="btn"
                type="primary"
                icon="diff"
                @click="savegatewayid(text, tags, i)"
                :disabled="!isTrueDexcim(text,tags,i)"
                style="width: 100px"
            >{{ $t("m.savegatewayid") }}
            </a-button>
          </div>
        </a-table>
      </div>
      <a-pagination
          class="pages"
          show-size-changer
          :default-current="1"
          :total="total"
          @change="Pages"
          :pageSizeOptions="['5', '10', '30', '40']"
          @showSizeChange="onShowSizeChange"
      />
    </a-card>
    <!-- 配置弹窗 -->
    <Drawer ref="drawer" @close="changedClose">
      <div class="search-a ov_flex">
        <a-input-search
            :placeholder="$t('m.PleaseEnterYourSearchTerms')"
            size="large"
            @search="configSearch"
            v-model="configKey"
        />
        <div class="btn-dispo">
          <a-button type="primary" @click="btnConfig">
            {{ $t("m.NewConfiguration") }}
          </a-button>
        </div>
      </div>
      <div id="components-table-demo-size">
        <a-table
            :rowKey="(record) => record.id"
            :columns="opkeys"
            :data-source="opdata"
            bordered
            :pagination="false"
        >
          <div slot="tags" slot-scope="text, tags, i">
            <a-button
                class="btn"
                icon="edit"
                type="primary"
                @click="updateSimple(text, tags, i)"
            >{{ $t("m.Modification") }}
            </a-button>
            <a-button
                class="btn"
                type="primary"
                icon="edit"
                @click="deModal(text, tags, i)"
            >{{ $t("m.Delete") }}
            </a-button>

          </div>
        </a-table>
      </div>
    </Drawer>
    <!-- 修改弹窗 -->
    <Drawer ref="changed" :size="size">
      <a-form :form="form"  :label-col="{ span: 5 }" class="labelOk">
        <a-form-item :label="$t('m.CustomerID')">
          <a-input
              v-decorator="['custCode',{ rules: [{ required: true, message: '以客户英文名称为编号' }] },]"
              v-model="formdata.custCode"/>
        </a-form-item>
        <a-form-item :label="$t('m.CustomerLevel')">
          <a-select v-model="formdata.custLevel">
            <a-select-option
                v-for="item in dictionariesD"
                :key="item.code"
                :value="item.code"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.CustomerName')">
          <a-input
              v-decorator="['custName',{ rules: [{ required: true, message: '请输入客户名称' }] },]"
              v-model="formdata.custName"/>
        </a-form-item>
        <a-form-item :label="$t('m.CustomerType')">
          <a-select v-model="formdata.custType">
            <a-select-option
                v-for="item in dictionariesC"
                :key="item.code"
                :value="item.code"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.IsEnabled')">
          <a-select v-model="formdata.status">
            <a-select-option value="1"> 有效</a-select-option>
            <a-select-option value="0"> 无效</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
            class="wiebutton"
            style="display: flex; justify-content: end">
          <a-button type="primary" html-type="submit" @click="changeBtn">
            {{ $t("m.Ok") }}
          </a-button>
        </a-form-item>
      </a-form>
    </Drawer>

    <!-- 新增客户弹窗 -->
    <Drawer ref="parbrn" closable="false" :size="size"
            @close="changedClose">
      <a-form :label-col="{ span: 5 }" class="labelOk" :form="form">
        <a-form-item :label="$t('m.CustomerID')">
          <a-input
              v-decorator="['custCode',{ rules: [{ required: true, message: '以客户英文名称为编号' }] },]"
              :placeholder="$t('m.PleaseEnterTheCustomerNumber')"
              v-model="formdata.custCode"
          />
        </a-form-item>
        <a-form-item :label="$t('m.CustomerLevel')">
          <a-select v-model="formdata.custLevel">
            <a-select-option
                v-for="item in dictionariesD"
                :key="item.code"
                :value="item.code"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.CustomerName')">
          <a-input
              v-decorator="['custName',{ rules: [{ required: true, message: '请输入客户名称' }] },]"
              :placeholder="$t('m.PleaseEnterTheCustomerName')"
              v-model="formdata.custName"
          />
        </a-form-item>
        <a-form-item :label="$t('m.CustomerType')">
          <a-select v-model="formdata.custType">
            <a-select-option
                v-for="item in dictionariesC"
                :key="item.code"
                :value="item.code"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('m.IsEnabled')">
          <a-select v-model="formdata.status">
            <a-select-option value="1"> 有效</a-select-option>
            <a-select-option value="0"> 无效</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class="wiebutton" style="display: flex; justify-content: end">
          <a-button type="primary" html-type="submit" @click="btns">
            {{ $t("m.Ok") }}
          </a-button>
        </a-form-item>
      </a-form>
    </Drawer>
    <!-- 删除信息弹窗 -->

    <!-- 新增配置弹窗 -->
    <a-modal
        :title="$t('m.NewConfiguration')"
        :visible="visible"
        :confirm-loading="confirmLoading"
        :cancelText="$t('m.Cancel')"
        :okText="$t('m.Ok')"
        @ok="clientOk"
        @cancel="clientCancel"
    >
      <a-form
          :form="form"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleSubmit"
      >
        <a-form-item :label="$t('m.MaximumUserNumber')">
          <a-input
              v-decorator="['maxUserNum',{ rules: [{ required: true, message: '请输入最大用户数' }] },]"
              v-model="formConfig.maxUserNum "
              style="width: 230px"/>
        </a-form-item>
        <a-form-item :label="$t('m.MaximumNumberOfDevices')">
          <a-input-number
              id="inputNumber"
              v-decorator="['maxDevNum',{ rules: [{ required: true, message: '请输入最大设备数' }] },]"
              v-model="formConfig.maxDevNum"
              style="width: 230px"/>
        </a-form-item>
        <a-form-item :label="$t('m.SystematicName')">
          <a-input
              v-decorator="['sysName',{ rules: [{ required: true, message: '请输入名称' }] },]"
              v-model="formConfig.sysName "/>
        </a-form-item>
        <a-form-item
            :label="$t('m.SystemValidityPeriod')"
        >
          <a-date-picker
              @change="DateonChange"
              v-model="formConfig.sysEndTime"
              style="width: 100% "
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
        :title="$t('m.NewConfiguration')"
        :visible="visible"
        :confirm-loading="confirmLoading"
        :cancelText="$t('m.Cancel')"
        :okText="$t('m.Ok')"
        @ok="clientOk"
        @cancel="clientCancel"
    >
      <a-form
          :form="form"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 12 }"
          @submit="handleSubmit"
      >
        <a-form-item :label="$t('m.MaximumUserNumber')">
          <a-input-number
              id="inputNumber"
              v-decorator="['maxUserNum',{ rules: [{ required: true, message: '请输入最大用户数' }] },]"
              v-model="formConfig.maxUserNum"
              style="width: 230px"/>
        </a-form-item>
        <a-form-item :label="$t('m.MaximumNumberOfDevices')">
          <a-input-number
              id="inputNumber"
              v-decorator="['maxDevNum',{ rules: [{ required: true, message: '请输入最大设备数' }] },]"

              v-model="formConfig.maxDevNum"
              style="width: 230px"/>
        </a-form-item>
        <a-form-item :label="$t('m.SystematicName')">
          <a-input
              v-decorator="['sysName',{ rules: [{ required: true, message: '请输入名称' }] },]"

              v-model="formConfig.sysName"
          />
        </a-form-item>
        <a-form-item
            :label="$t('m.SystemValidityPeriod')"
        >
          <a-date-picker
              @change="DateonChange"
              v-model="formConfig.sysEndTime "
              style="width: 100% "
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 删除配置弹窗 -->
    <Delete
        ref="configDelete"
        :dalete="daletes"
        :size="size"
        @confirm="configDelate"
    ></Delete>
    <!-- 状态改变提示 -->
    <Delete ref="unpchxed" :dalete="unpdalete" @confirm="unpchxeds"></Delete>

  </div>
</template>
<script>
import Headline from "@/components/Headline";
import Drawer from "@/components/Drawer";
import Delete from "@/components/Delete";
import {
  getCustSysSetLis,
  getCustSysSetList,
  getDelCustomer,
  getDelCustSysSet,
  getPerclint,
  getSaveCustomer,
  getSaveCustSysSet, Updategateway,
} from "@/api/perClient";
import {getdiction} from "@/api/dictionaries";
import {Setperms} from "@/assets/js/setperms";

export default {
  name: "Perclient",
  components: {Headline, Drawer, Delete},
  data() {
    return {
      checkNick: false,
      form: this.$form.createForm(this, {name: 'coordinated'}),
      custId: "", //删除id保存
      size: "50%",
      confirmLoading: false,
      dalete: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },
      daletes: {
        titles: this.$t("m.DeleteThePrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToDeleteThisData"),
      },

      fromdic: {
        groupcode: "SYS0000003",
        insertall: "-1|全部",
        where: "code<> -1 and code <> -100",
      },
      fromdicB: {
        groupcode: "SYS0000002",
        insertall: "-1|全部",
        where: "code<> -1 and code <> -100",
      },
      fromdicC: {
        groupcode: "SYS0000003",

        where: "code<> -1 and code <> -100",
      },
      fromdicD: {
        groupcode: "SYS0000002",

        where: "code<> -1 and code <> -100",
      },
      // 表格配置项

      unpdalete: {
        titles: this.$t("m.ChangeStatus"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureAboutTheModificationStatus"),
      },
      statusids: "",
      // 表格数据
      datas: [],
      // 配置数据
      columns: [
        {
          title: this.$t("m.CustomerLevel"),
          dataIndex: "custlevelname",
        },
        {
          title: this.$t("m.CustomerName"),
          dataIndex: "custname",
        },
        {
          title: this.$t("m.CustomerType"),
          dataIndex: "custtypename",
        },
        {
          title: this.$t("m.ParentCustomerCoding"),
          dataIndex: "parentcustcode",
        },
        {
          title: this.$t("m.CreatedDate"),
          dataIndex: "createdate",
        }, {
          title: this.$t("m.gatewayid"),
          dataIndex: "gatewayid",
        },
        {
          title: this.$t("m.Vaild"),
          key: "chxeds",
          dataIndex: "status",
          scopedSlots: {customRender: "chxeds"},
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: {customRender: "tags"},
        },
      ],
      opkeys: [
        {
          title: "id",
          dataIndex: "id",
          width: 50,
        },
        {
          title: this.$t("m.MaximumUserNumber"),
          dataIndex: "maxusernum",
        },
        {
          title: this.$t("m.MaximumNumberOfDevices"),
          dataIndex: "maxdevnum",
        },
        {
          title: this.$t("m.SystematicName"),
          dataIndex: "sysname",
        },
        {
          title: this.$t("m.SystemValidityPeriod"),
          dataIndex: "sysendtime",
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: {customRender: "tags"},
        },
      ],
      opdata: [],
      formdata: {
        custId: 0,
        custCode: "",
        custLevel: "",
        custType: "",
        custName: "",
        status: "1",
        gatewayid: "",
      },
      forminitial: {
        custLevel: "-1",
        custType: "-1",
        parentCustCode: "ymiots",
        limit: 10, //每页展示多少条
        page: 1, //展示第几页
        start: 0, //数据截取
        key: "",
      },

      configKey: "", //配置弹窗搜索条件
      configId: 0, //删除配置id
      visible: false,
      total: null, // 数据总数
      // 数据配置表单
      formConfig: {
        id: 0,
        maxUserNum: "",
        maxDevNum: "",
        sysName: "",
        sysEndTime: "2050-01-01",
        custId: "",
      },
      _id: 0,
      dictionariesA: [],
      dictionariesB: [],
      dictionariesC: [],
      dictionariesD: [],
    };
  },
  created() {
    this._getPerclint();
    this._getdiction();
    this.parms = Setperms(
        this.$route.fullPath,
        JSON.parse(sessionStorage.getItem("menu"))
    );
    console.log(this.parms);
  },
  methods: {
    changedClose() {
      // console.log('aaa')
      this.form.resetFields();
    },
    isTrue(str) {
      return this.parms.indexOf(str) !== -1;
    },
    isTrueDexcim(text, tags, i) {
      return tags.gatewayid == "" || tags.gatewayid == null
    },
    savegatewayid(text, tags, i) {
      this.unpchxedsorgatweid(tags);
    },
    _getdiction() {
      getdiction({params: this.fromdic}).then((res) => {
        console.log(res);
        this.dictionariesA = res.data.data;
      });
      getdiction({params: this.fromdicB}).then((res) => {
        console.log(res);
        this.dictionariesB = res.data.data;
      });
      getdiction({params: this.fromdicC}).then((res) => {
        console.log(res);
        this.dictionariesC = res.data.data;
      });
      getdiction({params: this.fromdicD}).then((res) => {
        console.log(res.data.data);
        if (JSON.parse(localStorage.getItem("userinfo")).custlevel != 0) {
          res.data.data.splice(1, 1);
          res.data.data.splice(0, 1);
        }
        this.dictionariesD = res.data.data;
      });
    },
    _getPerclint() {
      getPerclint({
        params: this.forminitial,
      })
          .then((res) => {
            console.log(res);
            this.$message.success("获取客户数据成功");
            this.datas = res.data.data;
            this.total = res.data.total;

          })
          .catch((err) => {
            this.$message.error("获取客户数据失败");
          });
    },
    // 搜索功能点击
    onSearch() {
      // 重新请求数据
      this._getPerclint();
    },
    and() {
      console.log("2");
    },
    chxedsd(scope, doc, i) {
      console.log(scope, doc, i);
      this.formdata.custId = doc.custid;
      this.formdata.custType = doc.custtype + "";
      this.formdata.custName = doc.custname;
      this.formdata.custLevel = doc.custlevel + "";
      this.formdata.status = doc.status;
      this.formdata.custCode = doc.custcode;
      this.statusids = doc.statusids;
      this.gatewayid = doc.gatewayid;

      this.$refs.unpchxed.showModal();
    },
    //有效弹窗确定按钮
    unpchxeds() {
      if (this.formdata.status == 1) {
        this.formdata.status = 0;
      } else {
        this.formdata.status = 1;
      }
      getSaveCustomer(this.formdata)
          .then((res) => {
            //关闭弹窗
            this.$message.success("操作成功");
            this._getPerclint();
          })
          .catch((err) => {
            this.$message.error("操作失败");
            // 清空数据
            this.formdata.custId = 0;
            this.formdata.custType = "";
            this.formdata.custName = "";
            this.formdata.custLevel = "";
            this.formdata.status = "";
            this.formdata.custCode = "";
            this.formdata.gatewayid = "";
          });
      this.$refs.unpchxed.visible = false;
    },
    unpchxedsorgatweid(tags) {
      Updategateway({custlevel : tags.custlevel})
          .then((res) => {
              this.$message.success(res.data.msg);
              this._getPerclint();
          })
          .catch((err) => {
            this.$message.error("操作失败");
          });
      this.$refs.unpchxed.visible = false;
    },
    getchindlist() {
      getCustSysSetList({
        params: {
          custId: this._id,
          start: 0,
          limit: 5,
          page: 1,
          key: this.configKey,
        },
      }).then((res) => {
        console.log(res);
        this.opdata = res.data.data;
      });
    },
    // 配置按钮点击
    edit(text, tags, i) {
      this._id = text.custid;
      this.formConfig.custId = text.custid;
      this.getchindlist();
      this.$refs.drawer.open("客户配置");
    },
    //配置搜索
    configSearch() {
      this.getchindlist();
    },
    // 修改按钮点击
    changed(text, tags, i) {

      setTimeout(() => {
        this.form.setFieldsValue({
          custName:tags.custname,
          custCode:tags.custcode
        })
      }, 200);

      console.log(tags);
      this.$refs.changed.open("修改信息");
      this.formdata.custId = text.custid;
      this.formdata.custType = text.custtype + "";
      this.formdata.custName = text.custname;
      this.formdata.custLevel = text.custlevel + "";
      this.formdata.status = text.status + '';
      this.formdata.custCode = text.custcode;
      this.formdata.gatewayid = text.gatewayid;
    },
    //修改弹窗确定按钮点击
    changeBtn() {
      this.form.validateFields(err => {
        if (!err) {
          this.form.resetFields();
          console.info('success');
        }
      });
      getSaveCustomer(this.formdata)
          .then((res) => {
            //关闭弹窗
            this.$refs.changed.drawer = false;
            this.$message.success("数据修改成功");
            this._getPerclint();
          })
          .catch((err) => {
            this.$refs.changed.drawer = false;
            this.$message.error("数据修改失败");
            // 清空数据
            this.formdata.custId = 0;
            this.formdata.custType = "";
            this.formdata.custName = "";
            this.formdata.custLevel = "";
            this.formdata.status = "";
            this.formdata.custCode = "";
            this.formdata.gatewayid = "";
          });
    },

    // 新增用户的点击
    parbrn() {
      setTimeout(() => {
        this.form.setFieldsValue({
          custName:"",
          custCode:""
        })
      }, 200);
      this.$refs.parbrn.open("新增客户");
      // 清空数据
      console.log(this.dictionariesD);
      this.formdata.id = 0;
      this.formdata.custId = 0;
      this.formdata.custType = "1";
      this.formdata.custName = "";
      if (this.dictionariesD.length != 0) {
        this.formdata.custLevel = this.dictionariesD[0].code;
      }
      this.formdata.status = "1";
      this.formdata.custCode = "";
    },
    btns() {
      this.form.validateFields(err => {
        if (!err) {
          this.form.resetFields();
          console.info('success');
        }
      });
      if (this.formdata.custName != "" && this.formdata.custCode != "") {
        getCustSysSetLis(this.formdata).then((res) => {
          this.$refs.parbrn.drawer = false;
          this.$message.success("用户添加成功");
          this._getPerclint();
        });
      }
    },
    //新增配置按钮的点击
    btnConfig() {
      setTimeout(() => {
        this.form.setFieldsValue({
          id:"",
          maxUserNum:"",
          maxDevNum:"",
          sysName:""
        })
      }, 200);

      this.formConfig.id = '0';
      this.formConfig.maxUserNum = '';
      this.formConfig.maxDevNum = '';
      this.formConfig.sysName = '';
      this.visible = true;
    },
    updateSimple(text, tags, i) {
      setTimeout(() => {
        this.form.setFieldsValue({
          id:tags.id,
          maxUserNum:tags.maxusernum,
          maxDevNum:tags.maxdevnum,
          sysEndTime:tags.sysendtime,
          sysName:tags.sysname
        })
      }, 200);
      console.log(tags)
      this.visible = true;
      this.formConfig.id = tags.id;
      this.formConfig.maxUserNum = tags.maxusernum;
      this.formConfig.maxDevNum = tags.maxdevnum;
      this.formConfig.sysEndTime = tags.sysendtime;
      this.formConfig.sysName = tags.sysname;
    },
    // 删除配置按钮的点击
    deModal(text) {
      this.configId = text.id;
      this.$refs.configDelete.showModal(text);
    },
    // 删除配置确定按钮的点击
    configDelate() {
      getDelCustSysSet({id: this.configId}).then((res) => {
        const msg = res.data.msg;
        if (res.data.success) {
          this.$message.success(msg);
          this.getchindlist();
        } else {
          this.$message.error(msg);
        }
      });
      this.$refs.configDelete.handleCancel();
    },
    // 确定
    clientOk() {
      this.form.validateFields(err => {
        if (!err) {
          this.form.resetFields();
          console.info('success');
        }
      });
      var data = this.formConfig
      if (data.maxUserNum != "" & data.maxDevNum != "" && data.sysName != "" && data.sysEndTime != "") {
        this.visible = false;
        getSaveCustSysSet(this.formConfig)
            .then((res) => {
              const msg = res.data.msg;
              if (res.data.success) {
                this.$message.success(msg);
                this.getchindlist();
              } else {
                this.$message.error(msg);
              }

            })
            .catch((err) => {
              this.$message.error("数据保存失败");
            });
      }
      //清空表单数据
      // this.formConfig.maxUserNum = "";
      // this.formConfig.maxDevNum = "";
      // this.formConfig.sysName = "";
      this.formConfig.sysEndTime = "2050-01-01";
    },
    //取消
    clientCancel() {
      this.visible = false;
      this.form.resetFields();

      this.formConfig.sysEndTime = "2050-01-01";
    },
    //选择
    contSelectChange() {
      this._getPerclint();
    },
    contSelectChangeB() {
      this._getPerclint();
    },
    DateonChange(sysEndTime, dateString) {
      console.log(sysEndTime, dateString);
      this.formConfig.sysEndTime = dateString;
      this.$refs.clients.onFieldChange()
    },
    // 分页操作功能
    onShowSizeChange(page, limit) {
      this.forminitial.page = page;
      this.forminitial.limit = limit;
      this.forminitial.start = (page - 1) * limit;
      this._getPerclint();
    },
    Pages(page, pageSize) {
      this.forminitial.page = page;
      this.forminitial.limit = pageSize;
      this.forminitial.start = (page - 1) * pageSize;
      this._getPerclint();
    },
    handleSubmit() {
      this.formConfig.sysEndTime = this.formConfig.sysEndTime._d;
    },
  },
  computed: {
    colunms() {
      let columns = [
        {
          title: this.$t("m.CustomerLevel"),
          dataIndex: "custlevelname",
        },
        {
          title: this.$t("m.CustomerName"),
          dataIndex: "custname",
        },
        {
          title: this.$t("m.CustomerType"),
          dataIndex: "custtypename",
        },
        {
          title: this.$t("m.ParentCustomerCoding"),
          dataIndex: "parentcustcode",
        },
        {
          title: this.$t("m.CreatedDate"),
          dataIndex: "createdate",
        },
        {
          title: this.$t("m.Vaild"),
          key: "chxeds",
          dataIndex: "status",
          scopedSlots: {customRender: "chxeds"},
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: {customRender: "tags"},
        },
      ]
      return columns
    }
  }

};
</script>
<style scoped lang="scss">
.search-a {
  width: 750px;
}

.ov_flex {
  display: flex;
  align-items: center;
}

#components-table-demo-size {
  margin-top: 30px;
}

tr,
th {
  padding: 4px 4px !important;
  overflow-wrap: break-word;
}

.btn {
  width: 73px;
  font-size: 10px;
  margin-left: 10px;
}

.btn-dispo {
  margin-left: 15px;
}

.pages {
  text-align: end;
  margin-top: 20px;
}

// .items {
//   display: flex;
//   justify-content: end;
// }
.select-a {
  width: 350px;
  margin-left: 15px;
}

.labelOk {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.labelOk /deep/ .ant-form-item {
  display: flex;
  width: 500px;
}

.labelOk /deep/ .ant-form-item .ant-form-item-control-wrapper {
  width: 100%;
}

.labelOk .wiebutton /deep/ .ant-form-item-control {
  display: flex;
  justify-content: flex-end;
}

</style>
